<template>
    <common-field v-bind="$attrs">
        <el-color-picker
            class="color-picker"
            popper-class="qrcode-color-picker"
            v-model="currentColor"
            :predefine="predefineColors"
            :show-alpha="true"
            @change="handleSubmit"
            ref="color-picker"
        ></el-color-picker>
    </common-field>
</template>

<script lang="ts">
import {
  Options, Vue, Emit, Prop,
} from 'vue-property-decorator';
import CommonField from './common-field.vue';

@Options({
  components: {
    CommonField,
  },
})
export default class CodeColorPicker extends Vue {
    @Prop({
      type: String,
    })
    color!: string;

    private currentColor = this.color || 'rgba(0,0,0,1)';

    private get predefineColors(): string[] {
      return [
        '#000',
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        '#c7158577',
      ];
    }

    @Emit('update:color')
    private handleSubmit(value: string) {
      return value;
    }
}
</script>

<style lang='less'>
.qrcode-color-picker {
    .el-color-dropdown__btns {
        .el-color-dropdown__link-btn {
            display: none!important;
        }
    }
}
.color-picker {
   width: 100%;
  .el-color-picker__trigger {
        width: 100%;
        .el-icon-close, .el-icon-arrow-down{
            display: none;
        }
    }
}
</style>
